Graphical Java Lesson 1-1: Drawing with REAL Graphics! 


Finally, the wait is over! Today, you are going to use REAL graphics, in Java! You are going to make a 
program that draws stuff on the screen, using drawing commands, NOT print statements! It won't be 
interactive, so nothing will happen if you click your mouse, or press keys on your keyboard, but it will 
be colorful. You'll learn how to make your GUI (graphical user interface, often pronounced "gooey") 
programs interactive, later. 


Let's create a new project: Drawing Program 1. In this program, we are going to use a built-in 
class called JFrame, which is in the j avax. swing package. Import the JFrame class, with the 
following import statement: 


import javax.swing.JFrame; 


A JFrame is essentially a main window for your program. Everything you draw in your program will 
be drawn in this window, rather than in the "Output" panel of NetBeans. Now, let's create a JFrame. 
In your program's main method, add the following line of code: 


JFrame main window = new JFrame("Drawing Program 1"); 


If you run your program, ... nothing! Stop the program. Why didn't anything show up on the screen? 
You created a main window, but by default, it's hidden. You need to make main window visible. Add 
the following line of code to your main method, right after the one above: 


main window.setVisible (true) ; 


If you run your program, the main window will look like this: 
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It's something, but it's so tiny! You can play around with it a bit: move it around, change its size, 
maximize it, minimize it, etc. But if you try to close it, it disappears, and ... NetBeans says that the 
program is still running! Stop the program. Why does the program still run, even after you "close" 
it? By default, when you "close" one of these windows, Java just makes it disappear, while your 
program keeps running. You need to change main window's default close operation, so that closing 
main window actually causes your program to exit. Insert the following line of code between the line 
that creates anew JFrame, and the line that makes it visible: 


main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 


Now, run your program again. If you close the window, your program will actually exit! If your 
program is not working as I have described, check the following: 


Did you import the JFrame class? The import statement goes BEFORE 
public class DrawingPrograml1, and is: 


import javax.swing.JFrame; 


The body of your main method should look like: 


JFrame main window = new JFrame("Drawing Program 1"); 
main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setVisible (true) ; 


Before we continue, let's recap: 


1. 


The first line creates anew JFrame, with the title, Drawing Program 1, and stores it in 
the variable, main window. If you make the window a bit bigger, when you run the program, 
you can see the whole title: 
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The second line sets our main window's default close operation to EXIT _ON_CLOSE, so that 
the program exits, when we close its main window. Note: EXIT _ON_ CLOSE is a symbolic 
constant that belongs to the JFrame class. That's why it's written, 
JFrame.EXIT ON CLOSE. 

The third line makes our main window visible on the screen. When setting up a window, I like 
to do this operation last. 


Let's make the main window bigger. Before the call to set Visible, insert the following line of code: 


main window.setSize(320, 200); 


The set Size method takes two arguments: the width and height you want the window to be, in 
pixels. When you run your program again, its main window will be 320 pixels wide and 200 pixels 


high. 


You can also change your window's initial location on the screen. After the call to setSize, insert the 
following line of code: 


main window.setLocation(50, 100); 


The set Location method takes two arguments, which specify where you want the window to 
"start" on the screen: the x- and y-coordinates of its TOP-LEFT corner, as numbers of pixels to the right 
of and below the TOP-LEFT corner of the screen. When you run your program again, the top-left 
corner of its main window will be 50 pixels to the right of and 100 pixels below the top-left corner of 
the screen. On the screen, and in a window: 


¢ The top-left corner has the coordinates, (0, 0). 
¢ The x-coordinate increases, as you move RIGHT. 
* The y-coordinate increases, as you move DOWN. 
° WARNING: This is the OPPOSITE of how it works, in math! 


Before we move on to more complicated stuff, check that the body of your main method looks like: 


JFrame main window = new JFrame("Drawing Program 1"); 

main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(320, 200); 

main window.setLocation(50, 100); 

main window.setVisible (true) ; 


It's okay, if you've changed the code a bit, to mess around, but make sure your program runs, and 
displays a visible window on the screen, before we continue. 


We're going to create a new class. Do the following: 


¢ Select "New File" from the File menu. 
¢ At the prompt: 
© Inthe "Categories" section, select "Java". 
© In the "File Types" section, select "Java Class". 
© Click the "Next" button. 
¢ At the prompt: 
© Replace the content of the "Class Name" field with DrawingArea. 
°o Make sure the "Location" field contains Source Packages. 
© Make sure the "Package" field contains drawing.program.pkgl. 


= You want all of your program's classes to belong to the SAME package. 
© Click the "Finish" button. 


Now, you should have a DrawingArea class, in a source file called DrawingArea. java. Your 
project should contain TWO classes: DrawingPrograml1 (contained in 
DrawingPrograml.java) and DrawingArea. 


Let's look at the new DrawingArea class: 


public class DrawingArea { 


} 


So far, it's empty, but we're going to transform it! Every window contains an area where "interesting 
stuff" can be drawn. This area is called the content pane. The content pane of a JFrame is usually of a 
class that is "similar to" the built-in JPanel class (also in the j avax. swing package). However, by 
default, a JPanel is pretty boring. We want to make a "better" version of the JPanel class, and give 
our main window a content pane of that type. 


Make sure you are working in your DrawingArea. java source file. Import the JPanel class, with 
the following import statement: 


import javax.swing.JPanel; 


We're going to make our DrawingArea class a "better" version of the JPanel class. After the word, 
DrawingArea, insert the words,"extends JPanel", so your DrawingArea class looks like: 


public class DrawingArea extends JPanel { 


} 


Let's give this class a simple constructor. In the body of the DrawingArea class, add the following 
code: 


public DrawingArea () 


{ 


super(null, true); 


} 


You don't have to worry about what happens inside of this constructor. Your DrawingArea class 
should now look like: 


public class DrawingArea extends JPanel { 
public DrawingArea () 
{ 
super(null, true); 


} 


Whenever the appearance of a JPanel changes (for example, the window it's in can now be seen 
again, after being hidden before), the JPanel gets repainted (redrawn by the computer). By default, a 
JPanel is blank. We want to change that, by overriding the paintComponent method (which gets 
called, whenever it's time to repaint the JPanel) of JPanel, in the DrawingArea class. In the 
body of the DrawingArea class, add the following code: 


protected void paintComponent (Graphics g) 
{ 
g.drawString("Hello World!", 20, 100); 


} 


The Graphics object, g, is basically "the thing you draw on", when you repaint your 
DrawingArea. Import the Graphics class (in the java. awt package), with the following import 
statement: 


import java.awt.Graphics; 


The Graphics class contains MANY useful methods for drawing various things, such as lines, 
rectangles, and text. We'll call the drawString method of g, to draw the text, Hello World!, 
starting at the coordinates, (20, 100), relative to the origin of your main window's DrawingArea. 


Before we continue, your DrawingArea. java source file should contain the following import 
statements (in any order): 


import java.awt.Graphics; 
import javax.swing.JPanel; 


Your DrawingArea class should look like: 


public class DrawingArea extends JPanel { 
public DrawingArea () 


{ 


super(null, true); 


} 


protected void paintComponent (Graphics g) 
{ 
g.drawString("Hello World!", 20, 100); 
} 
} 


If you run your program, ... it looks the same as it did, before we did all of this hard work! Why didn't 
anything change? Why didn't the program draw Hello World! on the screen? We need to have 
our main window ACTUALLY USE a DrawingArea object! Go to your 
DrawingPrograml1.java source file. In your program's main method, before the call to 
setVisible, insert the following line of code: 


main window.setContentPane (new DrawingArea()); 


Now, if you run your program, it should look like: 
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Hello ¥Y¥orld! 


If your program is not working properly, make sure the body of your main method looks like: 


JFrame main window = new JFrame("Drawing Program 1"); 

main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 
main window.setSize(320, 200); 

main window.setLocation(50, 100); 

main window.setContentPane (new DrawingArea()); 

main window.setVisible (true) ; 


On the second-to-last line of the above code, anew DrawingArea object is created, and passed to the 
setContentPane method of main window. This makes the content pane of main _ window that 
DrawingArea object. The paintComponent method of the DrawingArea class tells the 
computer exactly how to draw a DrawingArea object, step by step, whenever it's time for that 
DrawingArea object to be repainted. 


Let's draw a line in our DrawingArea. Go to your DrawingArea. java source file. In the 
paintComponent method of DrawingArea, after the call to drawString, add the following 
line of code: 


g.drawLine(10, 10, 200, 140); 


If you run your program, it should look like: 
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Hello ¥V¥orld! 


We called the drawLine method of g, to draw a line from (10, 10) to (200, 140), relative to the origin 
of the DrawingArea. 


Now, let's draw a rectangle in our DrawingArea, but let's make it red, rather than black. In the 
paintComponent method, after the call to drawLine, add the following line of code: 


gG-tillRect(10, -20, 100, 30); 


If you run your program, it should look like: 
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Hello ¥Vvorld! 


We called the £i11Rect method of g, to draw a filled rectangle. Its top-left corner is at (10, 20), 
relative to the origin of the DrawingArea, its width is 100 pixels, and its height is 50 pixels. 
However, the rectangle is still black. We want to make it red. In the paintComponent method, 
between the calls to drawLine and fi11Rect, insert the following line of code: 


g.setColor(Color.RED) ; 


Make sure you import the Color class (in the java. awt package), with the following import 
statement: 


import java.awt.Color; 


If you have done everything correctly, when you run your program, it should look like: 
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Hello ¥V¥orld! 


Before you drew the rectangle, you set g's color to the built-in color, RED. Every Graphics object 
has a color that it's currently "holding". Imagine that you're drawing on a piece of paper, with a bunch 
of different colored pens. If you have a black pen in your hand, everything you draw will be black, until 
you put that pen down, and then pick up a red pen. After you pick up the red pen, everything you draw 
will be red, until you put it down, and then pick up a pen of a different color. When you start painting, 
g's current color is the default color of BLACK. Everything you draw will be black, until you change 
the current color, by calling setColor. 


The Color class contains many built-in colors, which are symbolic constants. Some of them include 
RED, YELLOW, BLUE, and BLACK. Since they belong to the Color class, write them, Color .NAME, 
rather than just, NAME. 


You can specify your own colors, by creating new Color objects. Let's make the rectangle a spring 
green color, by replacing this line of code ... 


g.setColor (Color.RED) ; 
... With this: 
g.setColor(new Color(0, 255, 127)); 


Now, when you run your program, it should look like: 
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Hello ¥V¥orld! 


In Java, a color is specified by three numbers. These numbers describe the intensities of the red, green, 
and blue light that, when mixed, form that color. Each of these numbers must be between 0 (no light) 
and 255 (full-intensity light), inclusive. We made spring green, by mixing no red light, full-intensity 
green light, and half-intensity blue light together. 


Before we go on, check that your DrawingArea. java source file contains the following import 
statements (their order doesn't matter): 


import java.awt.Color; 


import java.awt.Graphics; 
import javax.swing.JPanel; 


The body of the paintComponent method of your DrawingArea class should look like: 


g.drawString("Hello World!", 20, 100); 
g.drawLine(10, 10, 200, 140); 
g.setColor(new Color(0, 255, 127)); 
g.fillRect(10, 20, 100, 50); 


Notice how the rectangle always covers part of the line? Order matters, when you're drawing stuff on 
the screen! If you draw two things that occupy the same space on the screen, the second thing you draw 
will cover the first thing! Let's demonstrate this, by drawing our rectangle first, and then drawing our 
line. Change the above code, to: 


.drawString("Hello World!", 20, 100); // This remains the same. 
.setColor(new Color(0, 255, 127)); 

.fillRect (10, 20, 100, 50); 

.setColor(Color.BLACK); // Make the line black! 

.drawLine(10, 10, 200, 140); 
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If you run your program, the line will cover a small part of the rectangle, like: 
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Hello ¥V¥orld! 


What color would the line be, if you didn't call setColor, the second time? To bring it on home, 
let's draw a blue circle that covers parts of BOTH the rectangle and the line. In the 
paintComponent method, after the call to drawLine, add the following code: 


g.setColor (Color.BLUE) ; 
o.tLLLOval( 90, S35, 40, 40)7 


Run your program. It should look like: 
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Hello ¥World! 


First, we set our current color to blue, by calling g's setColor method, with the argument, 
Color.BLUE. Then, we called the £i110val method, to draw a filled circle. We drew the circle 
with a top-left corner at (90, 55), a width of 40 pixels, and a height of 40 pixels. If the width and height 
of an oval are the same, the oval is a circle. Change the origin of the circle (specified by the first two 
arguments of £i110val1), so that it covers part of the text. Can you make the circle cover only 
one word of the text? 


Feel free to play around with this code, although you might want to save a backup copy first, in case 
you mess something up, and don't know how to fix it. To see other things you can draw, using the 


Graphics class, Google the following: 


Java Graphics class 


